<template>
	<div style="margin-top: -6px;" >
    <!-- :style="$store.state.print.devic>750?'margin-top: -9px;':''" -->
    <div  class="anavlist" >
        <div class="naa" :style="$store.state.print.devic != ''?'width:880px;':''">
          <div class="a-nav-item isc"  v-for="(item,index) in routers"
          :key="index"
          :class=" $store.state.print.static == index ? 'bgp' : 'bgps' "
          @click="RouterClick(item,index)">
          	<a href="#">{{item.name}}</a>
          </div>
        </div>
    </div>
	</div>
</template>

<script>
	export default {
		name:'aNavlist',
		data(){
			return {
				routers:[
					{url:'/index',name:'首页'},
					{url:'/general/index',name:'学校概况'},
					{url:'/inside/index',name:'校园内外'},
					{url:'/teachers/index',name:'师资力量'},
					{url:'/majorSetup/index',name:'专业设置'},
					{url:'/mine/index',name:'校园风采'},
					{url:'/work/index',name:'老教工作'},
					{url:'/student/index',name:'学生之窗'},
				],
				static:0,
        devicwidth:'',
        devic:''
			}
		},
		mounted() {
			this.static =  this.$store.state.print.static
      this.devic = localStorage.getItem('devicwidth')
      this.devicwidth = Number(localStorage.getItem('devicwidth') ) + 430
		},
		methods:{
			RouterClick(item,index){
				this.$router.push({path:item.url})
				localStorage.setItem('index',index)
				this.$store.state.print.static = index
				this.static = index
				localStorage.setItem('PATH',item.url)
				localStorage.setItem('urlName',item.name)
        this.$store.state.print.urlName = item.name
			}
		}
	}
</script>

<style scoped>
  .naa {
    margin: 0 auto;
    width: 1010px;
    height: 50px;
    display: flex; justify-content: space-between;
  }
	.bgp{
		color:#ffcb2e;
		border-bottom: 2px solid #ffcb2e;
	}
  .pp{
    display: flex; justify-content: space-between;
  }
	.bgps{
		border-bottom: none;
		color: none;
	}
	.anavlist{
		background: #ea4410;
		width: 100%;
	}
	.bgCo{
		color: #ffcb2e;
		border-bottom: 2px solid #ffcb2e;
	}

	.a-nav-item {
		display: flex;
		align-items: center;
		cursor: pointer;
    color: #FFFFFF;
    font-size: 18px;
	}
  .a-nav-item a{
    color: #FFFFFF;
    text-decoration: none;
  }
	.a-nav-item a:hover{
		text-decoration: underline;
		color: #ffcb2e;

	}
</style>
